<template>
  <el-container>
    <el-main>
      <div class="sa-flex sa-flex-center sa-row-center">
        <el-image class="m-140" style="width: 200px; height: 260px" :src="state.data.zfb" fit="contain" />
        <el-image style="width: 200px; height: 260px" :src="state.data.wx" fit="cover" />
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../../info.service';

  const state = reactive({
    data: {},
  });

  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const { error, data } = await api.aptitude.pay();
    if (error === 0) {
      state.data = data
    }
  };
</script>
<style lang="scss" scoped>

  .pay-img {
    width: 200px;
    height: 260px;
  }

  .m-140 {
    margin-right: 140px;
  }
</style>
